<template>
  <div class="login">
    <div class="login__content">
      <div class="login-title">
        {{ companyInfo.name !== null && companyInfo.name !== '' ? companyInfo.name : '悟空软件' }}
      </div>

      <login-by-pwd v-if="loginType === 'loginPwd'" :username.sync="username" />

    </div>

    <div class="footer">
      <!--      <img v-if="companyInfo.logo" :src="companyInfo.logo" class="company-logo">-->
      <!--      <div v-else class="footer-title"><img src="@/assets/img/logo.png" class="logo"><span>悟空软件</span></div>-->
      <!--      <div class="footer-des">一个账户可以访问 悟空CRM、悟空FS、悟空HRM 以及其他产品</div>-->
    </div>
  </div>
</template>

<script>
import { adminSystemIndexAPI } from "@/api/admin/config";
import { ssoLogin } from "@/api/login";

import LoginByPwd from "./component/LoginByPwd";

import Lockr from "lockr";
import { updateNavLinkName } from "@/utils";
import { LOCAL_LOGIN_LOGO_NAME } from "@/utils/constants.js";

function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
  var context = "";
  if (r != null) context = r[2];
  reg = null;
  r = null;
  return context == null || context == "" || context == "undefined"
    ? ""
    : context;
}
export default {
  // 登录
  name: "Login",

  components: {
    LoginByPwd,
  },

  props: {},

  data() {
    return {
      loginType: "loginPwd", // loginPwd loginCode foregetPwd multiple
      username: "", // 登录账号
      companyList: [],
      companyInfo: {
        name: "",
        logo: "",
      },
      loginParams: null, // 登录参数，多企业二次登录需要
    };
  },

  computed: {},

  watch: {},

  created() {
    // 单点登录
    if (GetQueryString("code")) {
      const loading = this.$loading({
        lock: true,
        text: "单点登录中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$store
        .dispatch("ssoLogin", GetQueryString("code"))
        .then((res) => {
          loading.close();
          // 如果是数组 要区分不同版本登录
          this.$router.push({ path: this.redirect || "/" });
        })
        .catch(() => {
          loading.close();
        });
    }
    this.handleLoginCache("get");
    this.getLogoAndName();
  },

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * 获取logo 和 名称
     */
    getLogoAndName() {
      adminSystemIndexAPI()
        .then((res) => {
          const resData = res.data;
          if (resData) {
            this.handleLoginCache("set", resData);
          } else {
            Lockr.rm(LOCAL_LOGIN_LOGO_NAME);
            this.handleLoginCache("get");
          }
        })
        .catch(() => {});
    },

    /**
     * @description: 操作登录缓存
     * @param {*} type get  set
     * @return {*}
     */
    handleLoginCache(type, data) {
      const hostname = window.location.hostname;
      if (type === "get") {
        const logCacheInfo = Lockr.get(LOCAL_LOGIN_LOGO_NAME);
        if (logCacheInfo && logCacheInfo[hostname]) {
          const domainData = logCacheInfo[hostname];
          this.companyInfo = {
            name: domainData.companyName,
            logo: domainData.companyLoginLogo,
          };
          // 读取缓存
          updateNavLinkName(domainData);
        } else {
          this.companyInfo = {
            name: "",
            logo: "",
          };
        }
      } else if (type === "set") {
        const logCacheInfo = Lockr.get(LOCAL_LOGIN_LOGO_NAME) || {};
        logCacheInfo[hostname] = data;
        Lockr.set(LOCAL_LOGIN_LOGO_NAME, logCacheInfo);
        this.companyInfo.logo = data.companyLoginLogo;
        this.companyInfo.name = data.companyName;

        // 更新导航菜单头信息
        updateNavLinkName(data);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// @media screen and (max-width: 1200px) {
//   .login {
//     background-image: none !important;
//   }
// }

.login {
  width: 100%;
  height: 100vh;
  background: url("./img/login-background.png");
  background-size: cover;
  -webkit-box-pack: justify;

  &__content {
    width: 400px;
    margin: 0 auto;
    text-align: center;
  }

  &-title {
    padding: 40px 0;
    font-size: 25px;
    font-weight: bold;
    line-height: 40px;
    color: $--color-primary;
  }

  .footer {
    width: 400px;
    padding: 24px 0;
    margin: 0 auto;
    font-size: 12px;
    color: $--color-text-secondary;
    text-align: center;

    &-title {
      font-size: 28px;
      font-weight: bold;
      color: $--color-text-regular;

      .logo {
        width: 32px;
        margin-right: $--interval-base;
      }

      .logo,
      span {
        vertical-align: middle;
      }
    }

    > .company-logo {
      width: 160px;
    }

    &-des {
      margin-top: 16px;
      font-size: 12px;
      color: $--color-text-secondary;
    }
  }

  .statement {
    margin-top: 24px;
    text-align: center;

    span {
      padding: 0 8px;
    }
  }
}
</style>
